// 柱形图模块 使用立即执行函数目的为了方式变量污染
(function () {
  //实例化echarts
  var myChart = echarts.init(document.querySelector('.bar .chart'));
  //配置项
  var option = {
    color: ['#2f89cf'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '0%',
      right: '0%',
      top: '10px',
      bottom: '4%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
        axisTick: {
          alignWithLabel: true
        },
        //修改刻度标签 相关的样式
        axisLabel: {
          color: 'rgba(255,255,255,.6)',
          fontSize: '12',
          interval:0 ,//在x轴上全部显示刻度标签
        },
        //不显示x坐标轴的样式
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        //修改刻度标签 相关的样式
        axisLabel: {
          color: 'rgba(255,255,255,.6)',
          fontSize: 12,
         
        },
        //y轴的线条改为2像素
        // axisLine: {
        //   lineStyle: {
        //     color: "rgba(255,255,255,.1)",
        //     with: 2
        //   }
        // },
        //y轴分割线的颜色
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }
    ],
    series: [
      {
      name:"旅游行业",
        type: 'bar',
        barWidth: '35%',
        data: [10, 52, 200, 334, 390, 330, 220],
        itemStyle:{
          //修改柱子的圆角
          barBorderRadius:5
        }
      }
    ]
  };
  //把配置项给实例对象   即建立配置项与实例之间的关系
  myChart.setOption(option)
  //自适应图表
  window.addEventListener('resize',function(){
    myChart.resize()
  })
}
)();
//柱状图2
(function () {
  //1.实例化
var myChart=echarts.init(document.querySelector('.bar2 .chart'))
//2.设置配置项
 var option = {
  grid: {
      left: '22%',
      top:'10%',
      bottom: '10%',
     // containLabel: true
  },
  //不显示x相关信息
  xAxis: {
   show:false
  },
  yAxis: {
      type: 'category',
      data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
      //不显示y轴的线
      axisLine:{
        show:false
      },
      //不显示刻度
      axisTick:{
        show:false
      },
      //把刻度标签里的文字设置为白色
      axisLabel:{
        color:"#fff"
      }
  },
  series: [
      {
          name: '条',
          type: 'bar',
          data: [18203, 23489, 29034, 104970, 131744, 630230],
          //柱子为圆角
          itemStyle:{
            barBorderRadius:20
          },
          //柱子之间的距离
          barCategoryGap:50,
          //柱子的宽度
          barWidth:10,
          //显示柱子内部的百分比
          label:{
            show:true,
            position:"inside",
            formater:"{c}%" //c会将series中的data中的数据解析出来
          }
      },
      {
          name: '2012年',
          type: 'bar',
          data: [19325, 23438, 31000, 121594, 134141, 681807]
      }
  ]
};
//3.将配置项给实例化
myChart.setOption(option);
//4.让图表自适应窗口的变化
window.addEventListener('resize',function(){
  myChart.resize();
})
})()
